<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b style="color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">所有作业成绩信息</b>
              </div>
            </el-col>
          </el-row>
            <div style="margin: 50px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
              <el-table
                :data="taskData"
                border
                style="width: 100%">
                <el-table-column
                  prop="studentName"
                  label="学生姓名">
                </el-table-column>
                <el-table-column
                  prop="studentNum"
                  label="学生学号">
                </el-table-column>
                <el-table-column
                  prop="teacherName"
                  label="老师姓名">
                </el-table-column>
                <el-table-column
                  prop="classroomName"
                  label="班级名称">
                </el-table-column>
                <el-table-column
                  prop="courseName"
                  label="课程名称">
                </el-table-column>
                <el-table-column
                  prop="taskName"
                  label="作业名称">
                </el-table-column>
                <el-table-column
                  prop="achievement"
                  label="作业成绩">
                </el-table-column>
              </el-table>
            </div>
          <div style="margin: 30px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <div id="echarts"></div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from '@/components/studentSide/left'
import Top from '@/components/studentSide/top'
import * as echarts from 'echarts'

export default {
  name: 'studentTaskAchievement',
  data () {
    return {
      taskData: [],
      studentAchievement: [],
      taskName: []
    }
  },
  created () {
    this.getStudentId()
    this.getAllTask()
  },
  methods: {
    tableRowClassName ({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    // 获取教学生id
    getStudentId () {
      this.studentId = JSON.parse(localStorage.getItem('student')).studentId
    },
    // 获取所有作业
    getAllTask () {
      this.$axios.post('http://localhost:8888/studentGeAllTaskByStudentId/' + this.studentId).then(res => {
        if (res.data.flag && res.data.data !== null) {
          this.taskData = res.data.data
          this.getAllStudentAchiement()
          this.studentGetAchievementToEcharts()
        } else if (res.data.flag === false && res.data.data === null) {
          this.$message({
            message: '警告哦，您还没有选择课程，请先选择课程',
            type: 'warning'
          })
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 获取当前学生的所有作业的成绩
    getAllStudentAchiement () {
      this.$axios.post('http://localhost:8888/studentGetAchievement/' + this.studentId, this.taskData).then(res => {
        if (res.data.flag) {
          this.$message({
            message: '恭喜你，所有作业的成绩信息获取成功',
            type: 'success'
          })
          this.taskData = res.data.data
        } else {
          this.$message.error('错了哦，您的作业成绩信息获取失败')
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 获取当前学生的所有作业的成绩
    studentGetAchievementToEcharts () {
      this.$axios.post('http://localhost:8888/studentGetAchievementToEcharts/' + this.studentId, this.taskData).then(res => {
        if (res.data.flag) {
          this.studentAchievement = res.data.data.studentAchievement
          this.taskName = res.data.data.taskName
          this.gradientStackingAreaMap()
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 绘制渐变堆叠面积图
    gradientStackingAreaMap () {
      var chartDom = document.getElementById('echarts')
      var myChart = echarts.init(chartDom)
      var option
      myChart.resize({
        width: 1115,
        height: 400
      })
      option = {
        color: ['#00DDFF', '##80FFA5', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
          text: '所有作业成绩分布',
          left: 'center',
          top: 'top'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#096'
            }
          }
        },
        legend: {
          data: this.taskName
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.taskName
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '学分',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.studentAchievement
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
      let currentIndex = -1

      setInterval(function () {
        var dataLen = option.series[0].data.length
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        currentIndex = (currentIndex + 1) % dataLen
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }, 3000)
      option && myChart.setOption(option)
    }
  },
  components: {
    Left,
    Top
  }

}
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
<style scoped>
.router-link-active {
  text-decoration: none;
  color: yellow;
}
a{
  text-decoration: none;
  color: white;
}
.el-chart-a{
  width: 1200px;
  height: 500px;
  margin: 10px auto;
}
.el-chart-1{
  width: 500px;
  height: 500px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
  list-style-type: none;
  margin-right: 30px;
}
.el-chart-2{
  width: 500px;
  height: 500px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
  list-style-type: none;
}
.el-chart-b{
  width: 1200px;
  height: 500px;
  margin: 20px auto;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
}
li{
  float: left;
}
.el-chart{
  width: 100%;
  height: 250px;
}
.el-chart ul li{
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
  width: 220px;
  height: 120px;
  /*border: 1px solid gold;*/
  list-style-type: none;
  margin-right: 50px;
}
.el-chart ul li:hover{
  background-color: #eee;
}
</style>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<style>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #cadcf5;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
